<template>
  <div class="menu">
    <!-- 表格数据 -->
    <el-table :data="tableData" style="width: 100%" row-key="id" border lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template #="{row,$index}">
          <el-button :disabled="row.level==4?true:false" type="primary" size="small" @click="addMenu_btn(row)">{{row.level==3?'添加功能':'添加菜单'}}</el-button>
          <el-button :disabled="row.level==1?true:false" type="warning" size="small" @click="editMenu_btn(row)">编辑</el-button>    
          <el-popconfirm :title="`确定删除菜单${row.name}吗?`" @confirm="delMenu_btn(row)">
            <template #reference>
              <el-button :disabled="row.level==1?true:false" type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加、修改菜单的dialog对话框 -->
    <el-dialog v-model="dialog_on_off" :title="form.id?'修改菜单':'添加菜单'" @close="dialog_cancel_btn" style="width:20vw;">
      <el-form :model="form" label-width="60px">
        <el-form-item label="名称">
          <el-input v-model="form.name" type="text" placeholder="请输入名称" autocomplete="on" />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="form.code" type="text" placeholder="请输入权限值"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog_cancel_btn">取消</el-button>
          <el-button type="primary" @click="dialog_confirm_btn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
//引入element
import { ElButton, ElTable, ElTableColumn, ElMessage, ElPopconfirm, ElDialog, ElForm, ElFormItem, ElInput } from "element-plus";
import { User } from '@element-plus/icons-vue';
//@ts-ignore引入请求函数
import { reqMenuList, reqAddMenu, reqUpdateMenu, reqDelMenu } from "@/api/permission/index.ts";
import { onMounted, reactive, ref } from "vue";

//生命周期
onMounted(()=>{
  //发请求获取数据
  getMenuList();
})

//表格初始数据
let tableData = ref([]);
//dialog对话框的开关
let dialog_on_off = ref(false);
//dialog中表单收集数据
let form = reactive<any>({
  name:"",
  code:""
})


//表格中的添加菜单、编辑、删除按钮
const addMenu_btn = (row) => {
  //收集点数据
  form.level = row.level + 1;
  form.pid = row.id;
  //打开dialog
  dialog_on_off.value = true;
}
const editMenu_btn = (row) => {
  //修改菜单,给表单赋值
  form = row;
  //打开dialog对话框
  dialog_on_off.value = true;
}
const delMenu_btn = async (row) => {
  let res:any = await reqDelMenu(row.id);
  if(res.code == 200){
    ElMessage({type:"success",message:"菜单删除成功!"});
    //重发请求
    getMenuList();
    // console.log("菜单删除api成功",res);
  }
}

//dialog中的取消、确定按钮
const dialog_cancel_btn = () => {
  //置空表单数据
  form.name = "";
  form.code = "";
  //关闭dialog
  dialog_on_off.value = false;
}
const dialog_confirm_btn = async () => {
  //发请求,添加某一级菜单或者修改某一级菜单
  if(form.id && form.id !== 0){
    //修改菜单
    let res:any = await reqUpdateMenu(form);
    if(res.code == 200){
      ElMessage({type:"success",message:"菜单修改成功!"});
      //重发请求
      getMenuList();
      // console.log("修改某一级菜单api成功",res);
    }
  } else {
    //添加菜单
    let res:any = await reqAddMenu(form);
    if(res.code == 200){
      ElMessage({type:"success",message:"菜单添加成功!"});
      //重发请求
      getMenuList();
      // console.log("添加某一级菜单api成功",res);
    }
  }
  //调用关闭按钮
  dialog_cancel_btn();
}

//请求函数，获取菜单列表
async function getMenuList(){
  let res:any = await reqMenuList();
  if(res.code == 200){
    tableData.value = res.data;
    ElMessage({type:"success",message:"菜单数据加载成功!"});
    // console.log("菜单列表数据api成功",res);
  }
}
</script>
<script lang="ts">
export default {
  name:"Menu"
}
</script>

<style>

</style>